<template>
  <div id="olContainer" ref="olContainerRef"></div>
</template>
<!-- <script src="./olMap.js"></script> -->
<script setup>
import { onMounted, ref, defineExpose, defineProps } from "vue";
import { Feature, Map, View } from "ol";
import { Point } from "ol/geom";
import MapUtils from "./utils/map-utils";
import "ol/ol.css";
import KspMap from "@/components/map/utils/kspmap";

import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import { ScaleLine, defaults as defaultControls } from 'ol/control';
import { OSM } from "ol/source";
// import "ol-overlay.less";
const olContainerRef = ref();
let KspMapclass;
let Utils = new MapUtils();
let olMap;
const prop = defineProps({
  data: null,
});
const mapView = new View({
  center: [12618191.188117, 2648719.790709],
  zoom: 7,
  projection: "EPSG:3857",
  maxZoom: 18,
  minZoom: 7,
});
const emit = defineEmits(["updateMap"]);
onMounted(() => {
  initialize();
});

const osmLayer = new TileLayer({
  source: new OSM()
});
function initialize() {
  initBaseLayer().then((layers) => {
    olMap = new Map({
      target: olContainerRef.value,
      layers,
      view: mapView,
      controls: defaultControls({
        zoom: false,
        rotate: false,
        attribution: false
      }).extend([
        // new ScaleLine({
        //   //设置比例尺单位，degrees、imperial、us、nautical、metric（度量单位）
        //   units: "metric"
        // })
      ])
    });
  });

  // olMap = new Map({
  //   target: olContainerRef.value, //地图容器div的ID
  //   view: new View({
  //     projection: 'EPSG:4326'
  //   }),
  //   view: mapView,
  //   // layers: [
  //   //   new TileLayer({
  //   //     source: new XYZ({
  //   //       url: "https://webrd0{s}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=040&size=1&scale=1&ltype=7",
  //   //       crossOrigin: "anonymous",
  //   //     }),
  //   //   })
  //   // ],
  //   //加载控件到地图容器中
  //   controls: defaultControls({
  //     zoom: false,
  //     rotate: false,
  //     attribution: false
  //   }).extend([
  //     new ScaleLine({
  //       //设置比例尺单位，degrees、imperial、us、nautical、metric（度量单位）
  //       units: "metric"
  //     })
  //   ])
  // });
  // olMap.addLayer(osmLayer)
  intmap();
}
function intmap() {
  if (olMap) {
    KspMapclass = new KspMap(olMap);
    KspMapclass.mapManager.onMapEvent("pointermove", mapMoveEndListener);
    emit("updatemap", olMap);
  } else {
    setTimeout(() => {
      intmap();
    }, 1000);
  }
}


/**
 * 鼠标移动事件
 */
function mapMoveEndListener(event) {
  if (event.feature.length) {
    KspMapclass.mapManager.changeMapCursor("select");
  } else {
    KspMapclass.mapManager.changeMapCursor("default");
  }
}

/**
 * 请求初始化地图（天地地图）
 * @returns
 */
function initBaseLayer() {
  return new Promise((resolve, reject) => {
    import("./assets/mapConfig.json").then((res) => {
      const layers = [];
      res.layers.baseMapLayers.forEach((element) => {
        const layer = Utils.createTiledXYZLayer(element);
        element.url && layers.push(layer);
        element.labelUrl &&
          layers.push(
            Utils.createTiledXYZLayer(
              Object.assign({}, element, { url: element.labelUrl })
            )
          );
      });
      resolve(layers);
    });
  });
}

defineExpose({
  olMap,
});
</script>
<style lang="less">
// @import url(./ol-overlay.less);
#olContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
